<template>
	<div class="block home-swiper">
		<swiper :options="swiperOption">
			<!-- slides -->
			<swiper-slide v-for="item of SwiperList" :key="item.id">
				<img class="swiper-image" :src="item.imageUrl" />
			</swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default{
		name:"HomeSwiper",
		props:{
			SwiperList:Array,
		},
		data:function(){
			return{
				swiperOption:{
					// 加入轮播图中的点
					// pagination:'.swiper-pagination',
					//支持循环轮播
			　　loop:true,
					//控制速度 
					speed: 6000,
			　　autoplay: 1000
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.swiper-image{
		width: 100%;
		/* height: 100%; */
		
	}
	/* 解决抖动问题，加载页面时加载文字时间比图片时间短，造成文字开始占位图片位置，然后加载图片将文字挤出到文字位置出现的抖动问题 */
	.home-swiper{
		overflow: hidden;
		width:  100%;
		height: 0;
		padding-bottom: 26.72%;
		background-color: gray;
	}
/* 	.home-swiper >>> .swiper-pagination-bullet-active{
		background: red !important;
	} */
	
</style>
